<template>
	<div id="city">
		<div class="padding">
			<van-sticky>
				<van-search v-model="citySearch" placeholder="全球城市/区域/位置" @search="searchListShow = true"/>
			</van-sticky>
		</div>

		<van-tabs v-model:active="active" @change="selectCity">
		  <van-tab title="国内/港澳台">
			  <city-list :hotCityList="hotList" :allCityList="cityList" :show="show"/>
		  </van-tab>
		  <van-tab title="国际/地区">
			  <city-list :hotCityList="hotList" :allCityList="cityList" :show="show"/>
		  </van-tab>
		</van-tabs>
		<van-popup v-model:show="searchListShow" round position="bottom" :style="{height: '80%' }">
			<template #default>
				abc
			</template>
		</van-popup>
	</div>
</template>

<script>
	import cityList from '../../components/cityList.vue';
	export default{
		data(){
			return{
				citySearch:'',
				active: 0,
				hotList:[],
				cityList:[],
				show: true,
				searchListShow: false,
			}
		},
		methods:{
			selectCity(index){
				this.cityList = [], this.hotList = [];
				this.$http.get(this.$api.HOTEL_CITY_LIST, {
					params:{
						type: index
					}
				}).then(result => {
					if(result.code == 200){
						this.show = false;
						this.hotList = result.body.hot;
						let list = result.body.list;
						Object.keys(list).forEach(key => this.cityList.push({key: key, value: list[key]}));
					}
				})
			}
		},
		created() {
			this.selectCity(0);
		},
		components:{
			cityList,
		}
	}
</script>

<style scoped>
	.padding{
		border-bottom: 1px solid gainsboro;
	}
</style>